<script lang="ts" setup>
	import { defineProps, defineEmits } from 'vue'
	const emit = defineEmits(['closePopup'])
	const props = defineProps({
		show: {
			type: Boolean,
			defalut: true,
		},
		title: {
			type: String,
			defalut: '提示',
		},
		content: {
			type: String,
			defalut: '内容',
		},
		cancelText: {
			type: String,
			defalut: '取消',
		},
		submitText: {
			type: String,
			defalut: '确认',
		},

	})
	const handleEvent = (type : Boolean) => {
		emit('closePopup', type)
	}
</script>

<template>
	<TnPopup v-model="props.show" class="" open-direction="center" :overlay-closeable="false" maskCloseable="false"
		top="54px">
		<view class="popup pa-24">
			<view class="toast-title text-center font-size-16 font-w-bold" v-if='title'>
				{{props.title}}
			</view>
			<view class="toast-content text-center font-size-12 mt-16 font-color-c666 mb-24">
				{{props.content}}
			</view>
			<view class="toast-action flex flex-js-sb font-color-white" v-if="props.showBtnType == 2">
				<view class="cancel flex flex-ai-center flex-js-center" @click="handleEvent(false)">{{props.cancelText}}
				</view>
				<view class="submit flex flex-ai-center flex-js-center" @click="handleEvent(true)">{{props.submitText}}
				</view>
			</view>
			<view class="toast-action-1 font-color-white flex flex-ai-center flex-js-center" @click="handleEvent(true)"
				v-if="props.showBtnType == 1">
				{{props.submitText}}
			</view>
		</view>

	</TnPopup>
</template>

<style lang="scss" scoped>
	.popup {
		width: 556rpx;
		height: 344rpx;
		background: linear-gradient(164deg, #DEE2FF 2%, #FFFFFF 100%);
		.title {
			width: 100%;
			height: 48rpx;
			font-family:
				PingFang SC,
				PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			line-height: 48rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
		.cancel,
		.submit {
			width: 210rpx;
			height: 80rpx;
			background: linear-gradient(90deg, #4B49E8 0%, #6B8BFB 100%);
			border-radius: 48rpx;
		}

		.cancel {
			background: #e8e8e8;
			color: #4B49E8;
			border: 2rpx solid #4B49E8;
		}

		.toast-action-1 {
			background: linear-gradient(90deg, #4B49E8 0%, #6B8BFB 100%);
			width: 460rpx;
			height: 80rpx;
			border-radius: 48rpx;
		}
	}
</style>